{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<br>
<div class="layui-body" style="overflow:auto;left:1px">
    <form class="layui-form" action="" id="cross_srh" lay-filter="cross_srh">

        <div class="layui-input-inline" style="left:15px">

            <img  id="demo1" style="width:75%" >
        </div>
        <hr class="layui-bg-gray">
        <div class="layui-input-inline">
            <label class="layui-form-label">需求编号：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="case_require_no" id="case_require_no" placeholder="请输入"
                       style="width:130px">
            </div>
        </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">主模块：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="case_main_mod" id="case_main_mod" placeholder="请输入"
                       style="width:130px">
            </div>
        </div>

        <div class="layui-input-inline">
            <label class="layui-form-label">子模块：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="case_second_mod" id="case_second_mod" placeholder="请输入"
                       style="width:212px">
            </div>
        </div>

        <br><br>
        <div class="layui-input-inline">
            <label class="layui-form-label">设计方法*：</label>
                    <div class="layui-input-inline" style="width:130px">
                        <select class="layui-select" name="case_fun" id="case_fun" lay-verify="" lay-search
                                lay-filter="case_fun">
                            <option value=''>请选择</option>
                            <option value='0'>正向用例</option>
                            <option value='1'>异常用例</option>
                            <option value='2'>场景用例</option>
                            <option value='3'>其它方法</option>
                        </select>
                    </div>
        </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">级别：</label>
                    <div class="layui-input-inline" style="width:130px">
                        <select class="layui-select" name="case_pri" id="case_pri" lay-verify="" lay-search
                                lay-filter="case_pri">
                            <option value=''>请选择</option>
                            <option value='高'>高</option>
                            <option value='中'>中</option>
                            <option value='低'>低</option>
                        </select>
                    </div>
        </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">脚本名称：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width:212px" name="autofun" id="autofun"
                       placeholder="请输入">

            </div>
        </div>

        <br><br>

        <div class="layui-input-inline">
            <label class="layui-form-label">前提：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width:130px" name="case_pre" id="case_pre"
                       placeholder="请输入">

            </div>
        </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">标题*：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width:250%" name="case_title" id="case_title"
                       placeholder="请输入">
            </div>
        </div>
        <br><br>
        <div class="layui-input-inline">
            <label class="layui-form-label">步骤：</label>
            <div class="layui-input-inline">
                <textarea name="case_step" id="case_step" style="width:390%;" placeholder="请输入"
                          class="layui-textarea"></textarea>

            </div>
        </div>
        <br><br>
        <div class="layui-input-inline">
            <label class="layui-form-label">期待结果：</label>
            <div class="layui-input-inline">
                <textarea name="case_expect" id="case_expect" style="width:390%;" placeholder="请输入"
                          class="layui-textarea"></textarea>

            </div>
        </div>
        <br><br>
        <div class="layui-input-inline">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width:380%" name="case_note" id="case_note"
                       placeholder="请输入">


            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">上传文件</label>
            <div class="layui-input-block">
                <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF"  lay-filter="switchTest">
            </div>
        </div>
        <div class="layui-input-inline" style="left:110px;" id="upload_fun" >
            <div class="layui-upload">
                <button type="button" class="layui-btn " id="test8">选择文件</button>
                <button type="button" class="layui-btn layui-btn-danger" id="test9">上传文件</button>
                <button type="button" class="layui-btn layui-btn-danger" id="test11">删除图片</button>
            </div>

        </div>

        <div class="layui-input-inline" style="left:110px;" id="save_all">
            <button type="button" class="layui-btn" id="test10">保存所有</button>
        </div>
        <div class="layui-input-inline" style="left:150px">

            <div class="layui-input-inline">
               <button class="layui-btn   layui-btn-danger" id="newAdd" type="button">
                <i class="layui-icon"></i> 复制新增
            </button>
            </div>
        </div>
        <div class="layui-input-inline" style="left:200px">
                <span id="redTips" style="color:red">此时为新增状态，即会插入一条新数据!</span>
        </div>

         <div class="layui-input-inline" style="display:none">
            <label class="layui-form-label">title*：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width:298%" name="case_plan" id="case_plan"
                       placeholder="请输入">
            </div>
        </div>
         <div class="layui-input-inline" style="display:none">
            <label class="layui-form-label">title*：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width:298%" name="project_id" id="project_id"
                       placeholder="请输入">
            </div>
        </div>
         <div class="layui-input-inline" style="display:none">
            <label class="layui-form-label">title*：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width:298%" name="id" id="id"
                       placeholder="请输入">
            </div>
        </div>
        <div class="layui-input-inline" style="display:none">
            <label class="layui-form-label">title*：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width:298%" name="imag_desc" id="imag_desc"
                       placeholder="请输入">
            </div>
        </div>
        <div class="layui-input-inline" style="display:none">
            <label class="layui-form-label">title*：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width:298%" name="in_person" id="in_person"
                       placeholder="请输入">
            </div>
        </div>
        <div class="layui-input-inline" style="display:none">
            <label class="layui-form-label">title*：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width:298%" name="up_person" id="up_person"
                       placeholder="请输入">
            </div>
        </div>
    </form>
</div>
<script>
layui.use(['upload','form'], function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  var form = layui.form;
  $("#upload_fun").hide();

  userId = layui.data('test').UserInfo.userId;
  $("#in_person").val(userId);
  $("#up_person").val(userId);

  //初始化获取内容
  //存储在内存中的当前apiCase的一行数据
  RowBaseCase = layui.data('test').RowBaseCase;
  if(RowBaseCase == undefined){

  }else{
      $("#redTips").html('<span id="redTips" style="color:red;left:300px">此时为更新状态!</span>');
      $('#demo1').attr('src', RowBaseCase.imag_desc);
      $('#demo1').attr('href', RowBaseCase.imag_desc);
      form.val('cross_srh',{
        case_no:RowBaseCase.case_no
        ,case_fun:RowBaseCase.case_fun
        ,case_require_no:RowBaseCase.case_require_no
        ,case_main_mod:RowBaseCase.case_main_mod
        ,case_second_mod:RowBaseCase.case_second_mod
        ,case_pre:RowBaseCase.case_pre
        ,case_pri:RowBaseCase.case_pri
        ,case_title:RowBaseCase.case_title
        ,case_step:RowBaseCase.case_step
        ,case_expect:RowBaseCase.case_expect
        ,case_note:RowBaseCase.case_note
        ,up_person:RowBaseCase.up_person
        ,in_person:RowBaseCase.in_person
        ,id:RowBaseCase.id
        ,imag_desc:RowBaseCase.imag_desc
        ,project_id:RowBaseCase.project_id
        ,case_plan:RowBaseCase.case_plan
        ,autofun:RowBaseCase.autofun
      });
   }

  upload.render({
    elem: '#test8'
    ,url: '/upload/files' //改成您自己的上传接口
    ,auto: false
    ,acceptMime: 'image/*'
    ,bindAction: '#test9'
    ,before: function(obj){
        if(RowBaseCase.imag_desc != ""){
            $('#demo1').attr('src', RowBaseCase.imag_desc);
        }
    }
    ,done: function(res){
       if(res.url!=""){
           $('#imag_desc').val(res.url);
           //#调用保存按钮的功能
           $('#demo1').attr('src', res.url);
           $('#imag_desc').val(res.url);
           $('#save_all').click();
       }
    }
  });

  $('#newAdd').on('click',function(){
        $("#redTips").html('<span id="redTips" style="color:red;left:300px">此时为新增状态，即会插入一条新数据!</span>');
        $("#case_title").val("");
        $("#id").val("");

  });

  $('#test11').on('click',function(){
        $('#imag_desc').val('');
        $('#demo1').attr('src', "");
        $('#save_all').click();

  });


  $('#save_all').on('click',function(){
      //将所有值进行一次拼接
      if($("#case_title").val() == "" ||$('#case_fun option:selected').val()==""){
         layer.msg("标题、设计方法必须填写");
         return false;
      }
      data = {
        "case_no":$("#case_no").val()
        ,"case_require_no":$("#case_require_no").val()
        ,"case_main_mod":$("#case_main_mod").val()
        ,"case_second_mod":$("#case_second_mod").val()
        ,"case_pri":$('#case_pri option:selected').val()
        ,"case_title":$("#case_title").val()
        ,"case_step":$("#case_step").val()
        ,"case_expect":$("#case_expect").val()
        ,"case_note":$("#case_note").val()
        ,"up_person":$("#up_person").val()
        ,"case_pre":$("#case_pre").val()
        ,"id":$("#id").val()
        ,"imag_desc":$("#imag_desc").val()
        ,"project_id":$("#project_id").val()
        ,"case_plan":$("#case_plan").val()
        ,"in_person":$("#in_person").val()
        ,"autofun":$("#autofun").val()
        ,"case_fun":$('#case_fun option:selected').val()
      };
      //发送ajax请求
      $.ajax({
                                    //发出请求
                                    type:"POST",
                                    url:"/basecase/case/manage",
                                    contentType: 'application/json; charset=utf-8',
                                    dataType:"json",
                                    data:JSON.stringify(data),
                                    success: function(result){
                                        if(result.id!=0){
                                            $("#id").val(result.id);
                                            $("#redTips").html('<span id="redTips" style="color:red;left:300px">此时为更新状态!</span>');

                                            layer.msg("保存成功!");
                                        }
                                    }
      });

  });



  //监听指定开关
  form.on('switch(switchTest)', function(data){
        if(data.elem.checked){
            $("#upload_fun").show();


        }else{

            $("#upload_fun").hide();
        }
  });

  form.render();


});

</script>
{% endblock %}